<template>
    <span class="i-layout-header-trigger i-layout-header-trigger-min">
        <Dropdown :trigger="isMobile ? 'click' : 'hover'" class="i-layout-header-user" :class="{ 'i-layout-header-user-mobile': isMobile }" @on-click="handleClick">
            <Avatar size="small" :src="info.head_img_url" v-if="info.head_img_url" />
            <span class="i-layout-header-user-name" v-if="!isMobile">{{ info.username }}</span>
            <DropdownMenu slot="list">
                <!-- <i-link to="/setting/user">
                    <DropdownItem>
                        <Icon type="ios-contact-outline" />
                        <span>{{ $t('basicLayout.user.center') }}</span>
                    </DropdownItem>
                </i-link>
                <i-link to="/setting/account">
                    <DropdownItem>
                        <Icon type="ios-settings-outline" />
                        <span>{{ $t('basicLayout.user.setting') }}</span>
                    </DropdownItem>
                </i-link> -->
                <DropdownItem name="password">
                    <Icon type="ios-calculator"/>
                    <!-- <span>{{ $t('basicLayout.user.password') }}</span> -->
                     <span>修改密码</span>
                </DropdownItem>
                <DropdownItem name="logout">
                    <Icon type="ios-log-out" />
                    <span>{{ $t('basicLayout.user.logOut') }}</span>
                </DropdownItem>
            </DropdownMenu>
        </Dropdown>
        <modal ref="modal"/> <!-- 添加站点 -->
    </span>
</template>
<script>
    import { mapState, mapActions } from 'vuex';
    import modal from './modal'

    export default {
        components: { modal },
        name: 'iHeaderUser',
        computed: {
            ...mapState('admin/user', [
                'info'
            ]),
            ...mapState('admin/layout', [
                'isMobile',
                'logoutConfirm'
            ])
        },
        methods: {
            ...mapActions('admin/account', [
                'logout'
            ]),
            handleClick (name) {
                if (name === 'logout') {
                    this.logout({
                        confirm: this.logoutConfirm,
                        vm: this
                    });
                } else if (name === 'password') {
                    this.$refs.modal.initial()
                }
            }
        }
    }
</script>
